<template>
  <div class="table">
    <el-row style="margin-bottom: 20px">
      <el-col :span="8">
        <el-select v-model="server" style="width: 400px">
          <el-option value="" label="选择全部"></el-option>
          <el-option value="70-80" label="亚服">亚服</el-option>
          <el-option value="20" label="欧服">欧服</el-option>
          <el-option value="30" label="东南亚服">东南亚服</el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-select v-model="interval" style="width: 400px">
          <el-option :value="7" label="最近一周"></el-option>
          <el-option :value="15" label="最近十五天"></el-option>
          <el-option :value="30" label="最近一个月"></el-option>
          <el-option :value="60" label="最近两个月"></el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-select v-model="type" style="width: 400px">
          <el-option value="0" label="选择全部"></el-option>
          <el-option value="1" label="普通充卡"></el-option>
          <el-option value="2" label="种族池"></el-option>
          <el-option value="3" label="友情池"></el-option>
          <el-option value="5" label="新手池"></el-option>
          <el-option value="6" label="UP池"></el-option>
          <el-option value="7" label="心愿池"></el-option>
          <el-option value="9" label="指挥官"></el-option>
          <el-option value="12" label="精英挑战赛"></el-option>
          <el-option value="10000" label="宾果翻牌"></el-option>
          <el-option value="120000" label="燃油提纯"></el-option>
          <el-option value="20000" label="定向抽卡"></el-option>
          <el-option value="130000" label="定向抽卡2"></el-option>
          <el-option value="30000" label="星球竞技场活动"></el-option>
          <el-option value="40000" label="7日连充"></el-option>
          <el-option value="140000" label="7日连充2"></el-option>
          <el-option value="50000" label="英雄成长"></el-option>
          <el-option value="70000" label="活动礼包"></el-option>
          <el-option value="80000" label="新翻牌"></el-option>
          <el-option value="100000" label="战场分身"></el-option>
          <el-option value="110000" label="战货系统"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-table-v2
        :columns="array"
        :data="realmList"
        :width="1900"
        :height="500"
        :cache="20"
        fixed
        scrollbar-always-on
      >
        <template #row="props">
          <Row v-bind="props" />
        </template>
      </el-table-v2>
      <!-- <a-table :dataSource="realmList" :columns="array" bordered :scroll="{x: 2040, y: 560}" :pagination="false" /> -->
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, watch,  cloneVNode } from 'vue'
import {format, getArray, getDiffDate, transformBeginTime} from "@/utils/utils"
import axios from '@/api/axios';

  // 表格数据处理
  const realmList = ref([])
  let interval = ref(30)
  
  const allData = ref([])
  let beginTime = ref(transformBeginTime(interval.value))

  async function getData() {
    const { data } = await axios.getData('http://192.168.1.135/api/selectActivity', {
      params: {
        beginTime: beginTime.value
      }
    })
    console.log(data)
    let date = []
    data.forEach((item, idx) => {
      date[idx] = getDiffDate(item.startTime, item.endTime)
    })
    data.forEach((d, idx) => {
      array.value.forEach((a) => {
        if(date[idx].includes(a.key)) {
          d[a.key] = `${d.activityName}(${d.activityId})`
        }
      })
    })
    allData.value = data
  }
  
  onMounted(async () => {
    await getData()
    realmList.value = allData.value
  })

  watch(interval, async (value) => {
    beginTime.value = transformBeginTime(value)
    array.value = [
      {
        title: '服务器',
        key: 'realmName',
        dataKey: 'realmName',
        width: 100
      },
      ...format(getArray(interval.value))
    ];
    await getData()
    setTimeout(() => {
      if(server.value == '') {
        realmList.value = allData.value
      }
      if(server.value == '70-80') {
        realmList.value = allData.value.filter(item => item.realmId.toString().startsWith('70') || item.realmId.toString().startsWith('80'))
      } else {
        realmList.value = allData.value.filter(item => item.realmId.toString().startsWith(server.value))
      }
      if(type.value != 0) {
        realmList.value = realmList.value.filter(item => item.activityType == type.value)
      }
    }, 0)
  })

  const array = ref([])
  
  const columns = [
    {
      title: '服务器',
      key: 'realmName',
      dataKey: 'realmName',
      width: 100
    },
    ...format(getArray(interval.value))
  ];


  const server = ref('')

  watch(server, (value) => {
    if(value == '') {
      realmList.value = allData.value
    }
    else if(value == '70-80') {
      realmList.value = allData.value.filter(item => item.realmId.toString().startsWith('70') || item.realmId.toString().startsWith('80'))
    } else {
      realmList.value = allData.value.filter(item => item.realmId.toString().startsWith(value))
    }
    if(type.value != 0) {
      realmList.value = realmList.value.filter(item => item.activityType == type.value)
    }
  })

  const type = ref('0')

  watch(type, (value) => {
    if(server.value == '') {
      realmList.value = allData.value
    }
    else if(server.value == '70-80') {
      realmList.value = allData.value.filter(item => item.realmId.toString().startsWith('70') || item.realmId.toString().startsWith('80'))
    } else {
      realmList.value = allData.value.filter(item => item.realmId.toString().startsWith(server.value))
    }
    if(value != '0') {
      realmList.value = realmList.value.filter(item => item.activityType == value)
    }
  })

  // 表格行列合并

  const rowsCol = ({rowData, columns: cols }) => {
    const dataKeys = Object.keys(rowData)
    let colSpanIndex = 1
    for(let i = 1; i < cols.length - 1; i++) {
      if(cols[i].dataKey === dataKeys[7]) {
        colSpanIndex = i
      }
    }
    const colSpan = dataKeys.slice(7).length
    columns[colSpanIndex].colSpan = () => {
      return colSpan
    }
    columns[colSpanIndex].align = 'center'
    return { colSpan, colSpanIndex }
  };


  const rowSpanIndex = 0
  columns[rowSpanIndex].rowSpan = ({ rowData, rowIndex }) =>{
    let mark = 1;
    const col = 'realmName'
    if(rowIndex > 0 && rowData[col] === realmList.value[rowIndex - 1][col]) {
      return 0;
    }
    
    for(let i = rowIndex + 1; i < realmList.value.length; i++) {
      if(rowData[col] === realmList.value[i][col]) {
        mark++;
      }
    }
    return mark
  }
  columns[rowSpanIndex].fixed = true
  array.value = columns

  const Row = ({ rowData, rowIndex, cells, columns }) => {
    const { colSpanIndex, colSpan } = rowsCol({ rowData, rowIndex, cells, columns })
    if (colSpan > 1 && cells[colSpanIndex]) {
      let width = Number.parseInt(cells[colSpanIndex].props.style.width)
      for (let i = 1; i < colSpan; i++) {
        width += Number.parseInt(cells[colSpanIndex + i].props.style.width)
        cells[colSpanIndex + i] = null
      }
      const style = {
        ...cells[colSpanIndex].props.style,
        width: `${width}px`,
        backgroundColor: 'var(--el-color-primary-light-3)',
      }
      cells[colSpanIndex] = cloneVNode(cells[colSpanIndex], { style })
    }
    
    const rowSpan = columns[rowSpanIndex].rowSpan({ rowData, rowIndex })
    if (rowSpan >= 1) {
      const cell = cells[rowSpanIndex]
      const style = {
        ...cell.props.style,
        backgroundColor: 'var(--el-color-primary-light-8)',
        height: `${rowSpan * 50}px`,
        alignSelf: 'flex-start',
        border: '1px solid var(--el-text-color-placeholder)',
        zIndex: 1,
      }
      for (let i = 1; i < rowSpan; i++) {
        if(rowData.activityType == realmList.value[rowIndex + i].activityType) {
          let [start1, start2] = [new Date(rowData.startTime), new Date(realmList.value[rowIndex + i].startTime)]
          let [end1, end2] = [new Date(rowData.endTime), new Date(realmList.value[rowIndex + 1].endTime)]
          if(!(end1 <= start2 || end2 <= start1)) {
            style.backgroundColor = 'var(--el-color-danger)'
          }
        }
      }
      cells[rowSpanIndex] = cloneVNode(cell, { style })
    }
    return cells
  }
</script>

<style lang="scss" scoped>

</style>
